<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j">
    <head>
        <!-- Mimic Internet Explorer 8 -->
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"  />
        <title>Cash Generator</title>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/style.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/richfaces-reset.css" rel="stylesheet" type="text/css" />
        <a4j:loadScript src="resource://jquery.js"/>
        <script type="text/javascript">
        	jQuery(document).ready(function(){
        		jQuery("#hidePanel").click(function(){
        			jQuery("#panel").animate({marginLeft:"-303px"}, 500 );
        			jQuery("#colleft").animate({width:"0px", opacity:0}, 400 );
        			jQuery("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
        			jQuery("#colright").animate({marginLeft:"0px"}, 500);
        			jQuery("#colright").width(950);
        			jQuery("#colright").css('padding-left', 0);
            	});
        		jQuery("#showPanel").click(function(){
        			jQuery("#colright").animate({marginLeft:"0px"}, 200);
        			jQuery("#colright").width(701);
        			jQuery("#colright").css('padding-left', 10);
	        		jQuery("#panel").animate({marginLeft:"0px"}, 400 );
	        		jQuery("#colleft").animate({width:"303px", opacity:1}, 400 );
	        		jQuery("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
        		});
	        });
        </script>
        <ui:insert name="head" />
    </head>
    
    <body>
        <div id="page">
            <div id="header">
                <a href="#{facesContext.externalContext.requestContextPath}/index.html" class="logo"><img src="#{facesContext.externalContext.requestContextPath}/images/cashgen-logo.png"
                    alt="RF logo" /> </a>

                <div class="right-controls">
                    <ui:include src="/templates/includes/top_nav.xhtml" />
                </div>
                
            </div>
            <div id="hidePanel" style="float: left;">
      			<img src="#{facesContext.externalContext.requestContextPath}/images/mydashboard.png" />
            </div>
            <div style="float: right;">
            	<img src="#{facesContext.externalContext.requestContextPath}/images/mytasks.png" />
            </div>
            
            <div id="page-content" style="clear: left;">
                <div id="colleft">
	                <div id="panel" style="float: left; width: 303px; background-color: #E6E9EC; min-height: 520px;">
	                	<ui:include src="/templates/includes/left_nav.xhtml" />
	                </div>
                </div>
                <div id="colright" style="float: left; width: 701px; min-height: 500px; padding: 10px">
                	<div id="showPanel">
						<span>»</span>
					</div> 
                	<ui:insert name="body">
                 		Body content missed
             		</ui:insert>
                </div>
            </div>
            <div id="footer">
            	<ui:include src="/templates/includes/footer.xhtml" />
            </div>
        </div>
    </body>
</html>